;
(function () {
    var data = {
        code: 'images/event_loop_1.png',
        data: [{ // 1
                info: '第1步：事件循环开始，宏任务队列中，只有script(整体代码)任务，任务script(整体代码)执行，全局执行上下文global入栈',
                queue: [{
                    name: 'script队列',
                    type: 'macro'
                }],
                task: [{
                    name: 'script',
                    queue: 'script队列',
                    type: 'macro'
                }],
                CE: ['global']
            },
            { // 2
                info: '第2步：script任务执行时遇到了setTimeout, setTimeout为一个宏任务源，它将任务timeout1分发到对应的队列中去',
                queue: [{
                        name: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [{
                        name: 'script',
                        queue: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global']
            },
            { // 3
                info: '第3步：script任务执行时遇到了Promise实例, Promise构造函数中的第一个参数，是在new的时候执行，\n因此不会进入任何队列，而是直接执行,因此promise1执行上下文入栈',
                queue: [{
                        name: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [{
                        name: 'script',
                        queue: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global', 'promise1']
            },
            { // 4
                info: '第4步：promise1任务执行时遇到了函数resolve，resolve执行上下文入栈',
                queue: [{
                        name: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [{
                        name: 'script',
                        queue: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global', 'promise1', 'resolve']
            },
            { // 5
                info: '第5步：resolve执行完成，resolve执行上下文出栈',
                queue: [{
                        name: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [{
                        name: 'script',
                        queue: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global', 'promise1']
            },
            { // 6
                info: '第6步：promise1执行完成，promise1执行上下文出栈',
                queue: [{
                        name: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [{
                        name: 'script',
                        queue: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global']
            },
            { // 7
                info: '第7步：任务then1被分发到对应队列中',
                queue: [{
                        name: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'promise队列',
                        type: 'micro'
                    }
                ],
                task: [{
                        name: 'script',
                        queue: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'then1',
                        queue: 'promise队列',
                        type: 'micro'
                    }
                ],
                CE: ['global']
            },
            { // 8
                info: '第8步：输出global后，宏任务script执行完毕',
                queue: [{
                        name: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'promise队列',
                        type: 'micro'
                    }
                ],
                task: [{
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'then1',
                        queue: 'promise队列',
                        type: 'micro'
                    }
                ],
                CE: ['global']
            },
            { // 9
                info: '第9步：宏任务script执行完成，开始执行当前的所有微任务，当前的微任务只有promise队列中的then1, 直接执行then1任务，then1执行上下文入栈',
                queue: [{
                        name: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'promise队列',
                        type: 'micro'
                    }
                ],
                task: [{
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'then1',
                        queue: 'promise队列',
                        type: 'micro'
                    }
                ],
                CE: ['global', 'then1']
            },
            { // 10
                info: '第10步：then1任务执行完成，then1执行上下文出栈',
                queue: [{
                    name: 'setTimeout队列',
                    type: 'macro'
                }],
                task: [{
                    name: 'timeout1',
                    queue: 'setTimeout队列',
                    type: 'macro'
                }],
                CE: ['global']
            },
            { // 11
                info: '第11步：此时，第一轮循环结束，开始第二轮循环。开始宏任务timeout1, timeout1执行上下文入栈',
                queue: [{
                    name: 'setTimeout队列',
                    type: 'macro'
                }],
                task: [{
                    name: 'timeout1',
                    queue: 'setTimeout队列',
                    type: 'macro'
                }],
                CE: ['global', 'timeout1']
            },
            { // 12
                info: '第12步： timeout1任务执行完成，timeout1执行上下文出栈',
                CE: ['global']
            }
        ]
    }

    eventLoop(data)
})();